<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: 3d柱形图
 * @LastEditTime: 2021-11-19 15:24:32
 * @FilePath: \tianjushi-kanban\src\components\charts\Bar3d1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { onMounted, toRefs, ref, reactive, watch, computed } from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "Y标题",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
        {
          name: "a",
          value: 175.17,
        },
        {
          name: "b",
          value: 148.35,
        },
        {
          name: "c",
          value: 95.36,
        },
        {
          name: "d",
          value: 95.36,
        },
      ],
    },
    color: {
      default: ["#B43A44", "#F5B02C", "#2969CC", "#199B86"],
      type: Array,
    },
    fontSize: {
      default: 16,
      type: Number,
    },
    barWidth: {
      default: 35,
      type: Number,
    },
  },
  setup: function (props, context) {
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(state.chartInit);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });

    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      let data = props.chartdata;
      let xAxisData = [];
      let seriesData1 = [];
      let sum = 0;
      let barTopColor = props.color;
      data.forEach((item) => {
        xAxisData.push(item.name);
        seriesData1.push(item.value);
        sum += item.value;
      });
      const option = {
        grid: {
          top: "10%",
          left: 0,
          right: 0,
          bottom: "20%",
        },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 25,
            align: "center",
            formatter: function (params, index) {
              return (
                "{a|" +
                ((seriesData1[index] / sum) * 100).toFixed(2) +
                "%}" +
                "\n" +
                "{b|" +
                params +
                "}"
              );
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: props.fontSize,
                  color: "#ffffff",
                },
                b: {
                  height: 20,
                  fontSize: props.fontSize,
                  color: "#ffffff",
                },
              },
            },
          },
          interval: 0,
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "柱顶部",
            type: "pictorialBar",
            symbolSize: [props.barWidth, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            label: {
              show: false,
              position: "top",
              fontSize: 16,
            },
            symbolPosition: "end",
            data: seriesData1,
          },
          {
            name: "柱底部",
            type: "pictorialBar",
            symbolSize: [props.barWidth, 10],
            symbolOffset: [0, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            data: seriesData1,
          },
          {
            name: "第一圈",
            type: "pictorialBar",
            symbolSize: [47, 16],
            symbolOffset: [0, 11],
            z: 11,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: barTopColor[0],
                borderWidth: 4,
              },
            },
            data: seriesData1,
          },
          {
            name: "第二圈",
            type: "pictorialBar",
            symbolSize: [62, 22],
            symbolOffset: [0, 17],
            z: 10,
            itemStyle: {
              normal: {
                color: "transparent",
                borderColor: barTopColor[1],
                borderWidth: 4,
              },
            },
            data: seriesData1,
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex],
                    },
                    {
                      offset: 0,
                      color: hexToRgba(barTopColor[params.dataIndex], 0.7),
                    },
                  ]);
                },
                opacity: 0.8,
              },
            },
            z: 16,
            silent: true,
            barWidth: props.barWidth,
            barGap: "-100%", // Make series be overlap
            data: seriesData1,
          },
        ],
      };
      chartdom.setOption(option);
      chartdom.hideLoading();
    };
    //挂载
    onMounted(() => {
      state.chartInit = echarts.init(state.echartref);
      state.chartInit.showLoading(showLoading());
      f_echartInit(state.chartInit);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>